<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>VUE实例洗牌</title>
        <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
        <script crossorigin="anonymous" integrity="sha384-9u9lzb/hr8e14GLHe5TEOrTiH3Qtw5DX2Zw9X/g7cqj81W2McEMx5CKOszxdb8jg" src="https://lib.baomitu.com/vue/2.6.10/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
        <style type="text/css">
             #file-demo {
                background: #ccc;
                padding-left: 20px;
                padding-top: 20px;
                padding-bottom: 40px;
                overflow: hidden;
                width: 490px;
            }
            #file-demo li{
                list-style: none;
                border: 1px solid #fff;
                float: left;
                width: 14%;
                height: 40px;
                text-align: center;
                line-height: 50px;
                /* margin: 10px; */
                margin-right: 10px;
                margin-bottom: 10px;
            }
            .file-move {
                transition: transform 1s;
            }
            .file {
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="file-demo" class="file">
            <h3>洗牌</h3>
            <span>基于VUE列表的位移过渡效果功能和loadash.js的实例</span>
            <button @click="shuffle">shuffle</button>
            <transition-group name="file" tag="div" style="display: flex; flex-wrap: wrap;">
                <li v-for="item in items" v-bind:key="item.id">
                  {{ item.number }}
                </li>
            </transition-group>
 
        </div>
    </body>
     
    <script type="text/javascript">
        var vm=new Vue({
            data: {
                /**
                 * Array.apply()创建数组，并规定数组的长度，map循环便利添加到li里
                 *
                 */
                items:Array.apply(null, {length: 18}).map(function(_, index){
                    return {
                        id: index,
                        number: index % 9 + 1
                    }
                })
            },
            created () {
              console.log(this.items)
            },
            methods: {
               shuffle:function(){
                    /* 列表位移过渡效果的核心 */
                    this.items = _.shuffle(this.items);
               }
            }
        }).$mount("#file-demo")
    </script>
</html>